<template>
  {{ b }}
  {{ c }}
  <div class="box" ref="cbox">{{ 1 + 1 }}</div>
  <div>
    <button @click="add">添加</button>
  </div>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue'
const add = () => {
  console.log(`helloworld`)
  b++
  c.value++
}
let b = 1
let c = ref(0)
let cbox = ref(null)
onMounted(() => {
  console.log(`onMounted`)
})

const obj = ref({
  id: 0,
  value: 999
})
watch(
  () => {
    return obj.value.value
  },
  (newValue, oldValue) => {
    console.log(`obj changed`, obj.value)
  }
)

setInterval((res) => {
  obj.value.value++
}, 1e3)
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
